---
title: Front Matter CMS & Astro
description: Front Matter CMS를 사용하여 Astro 프로젝트에 콘텐츠 추가
type: cms
service: Front Matter CMS
i18nReady: true
---

import { FileTree } from '@astrojs/starlight/components';

[Front Matter CMS](https://frontmatter.codes/)는 CMS를 편집기로 가져와 Visual Studio Code, GitPod 등에서 실행됩니다.

## Astro와의 통합

이 섹션에서는 Astro 프로젝트에 Front Matter CMS를 추가하는 방법을 살펴보겠습니다.

### 전제조건

- Visual Studio Code
- [Astro 블로그 템플릿](https://github.com/withastro/astro/tree/main/examples/blog)을 사용하여 Front Matter CMS를 시작하기 위한 기본 구성과 샘플 콘텐츠

### Front Matter CMS 확장 프로그램 설치

[Visual Studio Code 마켓플레이스 - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter)에서 확장을 얻거나 다음 링크를 클릭하여 확장을 얻을 수 있습니다: [VS Code에서 Front Matter CMS 확장 열기](vscode:extension/eliostruyf.vscode-front-matter)

### 프로젝트 초기화

Front Matter CMS가 설치되면 활동 표시줄에 새 아이콘이 표시됩니다. 클릭하면 기본 사이드바에 **Front Matter CMS** 패널이 열립니다. 프로젝트를 초기화하려면 다음 단계를 따르세요.

- Front Matter 패널에서 **Initialize project** 버튼을 클릭하세요.
- welcome 화면이 열리고 프로젝트 초기화를 시작할 수 있습니다.
- **Initialize project**의 첫 번째 단계를 클릭하세요.
- Astro는 지원되는 프레임워크 중 하나이므로 목록에서 선택할 수 있습니다.
- 콘텐츠 폴더 (이 경우 `src/content/blog` 폴더)를 등록하세요.

  :::note
  콘텐츠를 찾거나 생성할 위치를 Front Matter CMS에게 알리려면 폴더 등록이 필요합니다. pages, blog, docs 등과 같은 다양한 유형의 폴더를 가질 수 있습니다.
  :::

- 폴더 이름을 입력하라는 메시지가 표시됩니다. 기본적으로 폴더 이름을 사용합니다.

  :::note
  이름은 새 콘텐츠를 만드는 과정에서 사용됩니다. 예를 들어, 여러 폴더를 등록하면 생성하려는 콘텐츠 유형을 선택할 수 있습니다.
  :::

- **Show the dashboard**를 클릭하여 콘텐츠 대시보드를 엽니다.

  :::tip
  Front Matter CMS가 초기화되면 다음과 같이 대시보드를 열 수 있습니다.

  - 키보드 바인딩 사용: <kbd>alt</kbd> + <kbd>d</kbd> (Windows 및 Linux) 또는 <kbd>options</kbd> + <kbd>d</kbd> (macOS)
  - 명령 팔레트를 열고 `Front Matter: Open dashboard`를 검색하세요.
  - 패널의 제목 표시줄이나 파일에 있는 **Front Matter** 아이콘을 클릭합니다.
  :::

### 프로젝트 구성

프로젝트가 초기화되면 프로젝트 루트에 `frontmatter.json` 구성 파일과 `.frontmatter` 폴더가 생성됩니다.

<FileTree title="Project Structure">
- .frontmatter/
  - database/
    - mediaDb.json
- src/
- astro.config.mjs
- **frontmatter.json**
- package.json
</FileTree>

#### 콘텐츠 타입 구성

콘텐츠 타입은 Front Matter CMS가 여러분의 콘텐츠를 관리하는 방식입니다. 각 콘텐츠 타입에는 웹 사이트에 사용하려는 콘텐츠 타입별로 정의할 수 있는 일련의 필드가 포함되어 있습니다.

필드는 페이지 콘텐츠의 프런트매터에 해당합니다.

`frontmatter.json` 파일에서 콘텐츠 타입을 구성할 수 있습니다.

- `frontmatter.json` 파일을 엽니다.
- `frontMatter.taxonomy.contentTypes` 배열을 다음 콘텐츠 타입 구성으로 바꿉니다.

```json title="frontmatter.json"
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

:::note
이 구성은 Front Matter 콘텐츠 타입이 Astro 블로그 템플릿의 콘텐츠 컬렉션 스키마와 일치하는지 확인합니다.
:::

:::tip
Front Matter CMS의 [콘텐츠 제작 문서 섹션](https://frontmatter.codes/docs/content-creation)에서 콘텐츠 타입 및 지원되는 필드에 대한 자세한 내용을 확인할 수 있습니다.
:::

### 편집기에서 아티클 미리보기

**Front Matter CMS** 패널에서 **Start server** 버튼을 클릭하세요. 이 작업은 Astro 로컬 개발 서버를 시작합니다. 실행하고 나면 콘텐츠 대시보드를 열고 아티클 중 하나를 선택한 다음 **Open preview** 버튼을 클릭하여 편집기에서 아티클를 열 수 있습니다.

### 새 아티클 만들기

**Front Matter CMS Dashboard**를 엽니다. 다음과 같이 이 작업을 수행할 수 있습니다.

- Front Matter CMS의 콘텐츠 대시보드를 엽니다.
- **Create content** 버튼을 클릭하세요.
- Front Matter에서는 아티클 제목을 물어볼 것입니다. 입력하고 엔터를 눌러주세요
- 새 아티클이 생성되어 편집기에서 열립니다. 아티클 작성을 시작할 수 있습니다.

### Markdoc을 Front Matter CMS와 함께 사용하기

Front Matter CMS와 함께 Markdoc을 사용하려면 `frontMatter.content.supportedFileTypes`에서 이를 구성해야 합니다. 이 설정을 통해 CMS는 어떤 타입의 파일을 진행할 수 있는지 알 수 있습니다.

다음과 같이 설정을 구성할 수 있습니다.

```json title="frontmatter.json"
"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]
```

콘텐츠를 Markdoc로 생성하려면 콘텐츠 타입에 `fileType` 속성을 지정하세요.

```json title="frontmatter.json" ins={7}
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

## 공식 자료

- [Front Matter CMS](https://frontmatter.codes/)
- [Front Matter CMS - 문서](https://frontmatter.codes/docs/)
- [Astro와 Front Matter CMS 시작하기](https://youtu.be/xb6pZiier_E)
